<template>
  <el-row class="settings">
    <el-tabs v-model="activeName" @tab-click="" v-loading="tabsLoading" type="border-card">
      <!--weChat  start-->
      <el-tab-pane label="微信设置" name="first">
        <el-row>
          <!--表格展示 start-->
          <el-table :data="WeChat" style="width: 100%" border>
            <el-table-column label="参数名称">
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="key">
              <template slot-scope="scope">
                <span>{{ scope.row.key }}</span>
              </template>
            </el-table-column>
            <el-table-column label="value">
              <template slot-scope="scope">
                <div v-if="scope.row.editble">
                  <el-input v-model="scope.row.value" @blur="editSubmit(scope.row)"></el-input>
                </div>
                <div @click="edit(scope.row)" v-else="scope.row.editble">
                  <span>{{ scope.row.value}}</span>
                </div>

              </template>
            </el-table-column>
            <el-table-column label="更新时间">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span>{{ scope.row.updated_at }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--表格展示 end-->
        </el-row>
      </el-tab-pane>
      <!--weChat  end-->
      <!--AliPay  start-->
      <el-tab-pane label="支付宝设置" name="second">
        <el-row>
          <!--表格展示 start-->
          <el-table :data="AliPay" style="width: 100%" border>
            <el-table-column label="参数名称">
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="key">
              <template slot-scope="scope">
                <span>{{ scope.row.key }}</span>
              </template>
            </el-table-column>
            <el-table-column label="value">
              <template slot-scope="scope">
                <div v-if="scope.row.editble">
                  <el-input v-model="scope.row.value" @blur="editSubmit(scope.row)"></el-input>
                </div>
                <div @click="edit(scope.row)" v-else="scope.row.editble">
                  <span>{{ scope.row.value}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="更新时间">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span>{{ scope.row.updated_at }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--表格展示 end-->
        </el-row>
      </el-tab-pane>
      <!--AliPay  end-->
      <!--DaYu  start-->
      <el-tab-pane label="短信设置" name="third">
        <el-row>
          <!--表格展示 start-->
          <el-table :data="DaYu" style="width: 100%" border>
            <el-table-column label="参数名称">
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="key">
              <template slot-scope="scope">
                <span>{{ scope.row.key }}</span>
              </template>
            </el-table-column>
            <el-table-column label="value">
              <template slot-scope="scope">
                <div v-if="scope.row.editble">
                  <el-input v-model="scope.row.value" @blur="editSubmit(scope.row)"></el-input>
                </div>
                <div @click="edit(scope.row)" v-else="scope.row.editble">
                  <span>{{ scope.row.value}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="更新时间">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span>{{ scope.row.updated_at }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--表格展示 end-->
        </el-row>
      </el-tab-pane>
      <!--DaYu  end-->
      <!--Mail  start-->
      <el-tab-pane label="邮箱设置" name="fourth">
        <el-row>
          <!--表格展示 start-->
          <el-table :data="Mail" style="width: 100%" border>
            <el-table-column label="参数名称">
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="key">
              <template slot-scope="scope">
                <span>{{ scope.row.key }}</span>
              </template>
            </el-table-column>
            <el-table-column label="value">
              <template slot-scope="scope">
                <div v-if="scope.row.editble">
                  <el-input v-model="scope.row.value" @blur="editSubmit(scope.row)"></el-input>
                </div>
                <div @click="edit(scope.row)" v-else="scope.row.editble">
                  <span>{{ scope.row.value}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="更新时间">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span>{{ scope.row.updated_at }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--表格展示 end-->
        </el-row>
      </el-tab-pane>
      <!--Mail  end-->
      <!--Kdn  start-->
      <el-tab-pane label="快递鸟设置" name="fifth">
        <el-row>
          <!--表格展示 start-->
          <el-table :data="Kdn" style="width: 100%" border>
            <el-table-column label="参数名称">
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="key">
              <template slot-scope="scope">
                <span>{{ scope.row.key }}</span>
              </template>
            </el-table-column>
            <el-table-column label="value">
              <template slot-scope="scope">
                <div v-if="scope.row.editble">
                  <el-input v-model="scope.row.value" @blur="editSubmit(scope.row)"></el-input>
                </div>
                <div @click="edit(scope.row)" v-else="scope.row.editble">
                  <span>{{ scope.row.value}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="更新时间">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span>{{ scope.row.updated_at }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--表格展示 end-->
        </el-row>
      </el-tab-pane>
      <!--Kdn  end-->

    </el-tabs>

  </el-row>
</template>

<script>
  import { getSettings, editSettings } from '../../api/api'

  export default {
    component: {},
    data () {
      return {
        tabsLoading: true,
        activeName: 'first',
        WeChat: [],
        AliPay: [],
        DaYu: [],
        Mail: [],
        Kdn: []
      }
    },
    methods: {
      //  点击编辑
      edit (row) {
        row.editble = true
        row.updated_at = this.updateTime()
      },
      //  blur Ajax 保存
      editSubmit (row) {
        let form = [row]
        row.editble = false
        row.updated_at = this.updateTime()
        this.sub(form)
      },
      updateTime () {
        let date = new Date()
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
        let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
        let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
        let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
        return (Y + M + D + h + m + s)
      },
      sub (form) {
        editSettings(form).then((res) => {
          if (parseInt(res.status) === 1) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          } else {
            this.$message.error('保存失败！错误代码:' + res.errorCode)
            this.getSettingsList()
          }
        })
      },
      changeStatus (row) {
        let form = [row]
        this.sub(form)
      },
      getSettingsList () {
        getSettings().then((res) => {
          this.tabsLoading = false
          if (parseInt(res.status) === 1) {
            let data = res.data
            this.WeChat = data.WeChat
            this.AliPay = data.AliPay
            this.DaYu = data.DaYu
            this.Mail = data.Mail
            this.Kdn = data.Kdn
          } else {
            this.$message.error('请求失败！错误代码:' + res.errorCode)
          }
        })
      }
    },
    mounted () {
      this.getSettingsList()
    }
  }
</script>


<style scoped lang="sass">
  span
    margin-left: 10px


</style>
